<template>
	<scroll-view :scroll-into-view="topItem" scroll-with-animation class="scroll-cont" scroll-y="true" @scroll="handleScoll">
		<view>
			<view id="top"></view>
			
			
			<!-- 封装的顶部标题栏 -->
				<nav-custom></nav-custom>
				
				
				<!-- 轮播图 -->
				<swiper class="banner" :indicator-dots="true" :autoplay="true" indicator-active-color="white" :interval="5000" :duration="500">
					<swiper-item v-for="(item,index) in banner" :key="item.objectId" @click="handleBanner(item.link)">
						<view class="swiper-item" >
							<image :src="item.img" ></image>
						</view>
					</swiper-item>
				</swiper>
				
				
				<!-- 分类标题 -->
				<home-title 
				title='本季推荐' 
				enTitle='Seasonal Recommend' 
				enTit='Seasonal'
				></home-title>
				
				
				<scroll-view scroll-x="true">
					<view class="scroll-inner">
						<image :src="item.src" v-for="item in seasonal_img"  mode="heightFix"></image>
					</view>
				</scroll-view>
				
				
				<home-title
				title='法式经典' 
				enTitle='French Classis' 
				enTit='French'
				></home-title>
				
				<!-- 商品图片 -->
				<image src="../../static/IMG/french.jpg" class="classity"></image>
				
				<!-- 商品列表 -->
				<view class="flex flex-wrap padding-sm justify-between">
					<goods-item  v-for="(item,index) in glist" :gdata="item"></goods-item>
				</view>
				
				<!-- 返回顶部 -->
				<view class="back-top" v-if="isShow">
					<text class="iconfont icon-tubiao_fanhuidingbu" @click="handleBackTop"></text>
				</view>
			</view>
		
	</scroll-view>
</template>

<script>
	import{ $http,$get,$post } from '../../utils/request.js'
	export default {
		
		data() {
			return {
				banner:[],
				isShow:false,
				topItem:'',
				glist:[],
				seasonal_img:[
					{src:require("@/static/IMG/recommend1.jpeg")},
					{src:require("@/static/IMG/recommend2.jpg")},
					{src:require("@/static/IMG/recommend3.jpg")}
				]
			};
		},
		methods:{
			handleScoll(ev){
				const {scrollTop}=ev.detail
				this.isShow=scrollTop>500
			},
			handleBackTop(){
				this.topItem='top'
			},
			handleBanner(link){
				uni.navigateTo({
					url:`./banner_ad?link=${link}`
				})
			}
		},
		onLoad(){
			// 原始方法
			// uni.request({
			// 	url:'https://se1zcx96.lc-cn-n1-shared.com/1.1/classes/classify',
			// 	method:'GET',
			// 	header:{
			// 		'X-LC-Id':'SE1zCX96WxeRzvNyhm5rdVMI-gzGzoHsz',
			// 		'X-LC-Key':'92BR3Wc2daMq9gUWib15J6Q5',
			// 		'Content-Type':'application/json',
			// 	},
			// 	success:(res)=>{
			// 		console.log(res);
			// 	}
			// })
			// $get('/1.1/classes/classify').then(res=>{
			// 	console.log(res);
			// })
			this.$get('/1.1/classes/banner').then(res=>{
				console.log(res);
				this.banner=res.results
			}),
			this.$get('/1.1/classes/goods').then(res=>{
				console.log(res);
				this.glist=res.results
				
			})
		}
	}
</script>

<style lang="scss">
.banner{
	height: 1000upx;
	swiper-item{
		height: 1000upx;
	}
	image{
		width: 100%;
		height: 1000upx;
	}
}
.scroll-inner{
	white-space:nowrap;
	image{
		height: 290upx;
		border-radius: 20px;
		margin:0 10upx;
		border: 2px solid rgba(0, 0, 0,.05);
	
	}

}
.classity{
	height: 380upx;
	width: 100%;
	border-radius: 30upx;
}
.back-top{
	height: 100upx;
	width: 100upx;
	background-color: rgba(0, 0, 0,.05);
	border-radius: 50%;
	box-shadow: 0 0 30upx 4upx rgba(0, 0, 0,.2);
	position: fixed;
	right: 20upx;
	bottom: 40upx;
	text-align: center;
	line-height: 100upx;
}
.scroll-cont{
	height: 100vh;
}
</style>
